{extend name="common/layout" /}
{block name="main"}
<t-card class="list-card-container" :bordered="false">
  <div style="margin-bottom: 10px;">
    <div style="display: flex; align-items: center; gap: 10px; margin-bottom: 10px;">
      <t-button theme="primary" @click="handleAdd" :disabled="buttonDisabled">
        <template #icon><t-icon name="add" /></template>
        新建
      </t-button>
      <div style="flex: 1; display: flex; gap: 5px; max-width: 300px;">
        <t-input v-model="searchValue" placeholder="请输入房号、姓名、身份证号码、联系电话" clearable @enter="handleSearch"
          style="flex:1" />
      </div>
      <t-button theme="primary" @click="handleSearch">
        <template #icon><t-icon name="search" /></template>
      </t-button>
      <t-button theme="primary" @click="handleExport" style="margin-left: auto;">
        <template #icon><t-icon name="file-export" /></template>
        导出列表
      </t-button>
    </div>
  </div>

  <t-table :data="tableData" :columns="columns" row-key="id" vertical-align="top" :bordered="true" size="small"
    active-row-type="single" :hover="true" :loading="tableLoading" :pagination="pagination">
    <template #op="slotProps">
      <t-space>
        <t-button size="small" @click="handleEdit(slotProps.row)">修改</t-button>
        <t-button size="small" theme="warning" @click="handlePhoto(slotProps.row)">证件照片</t-button>
        <t-popconfirm theme="danger" content="确认删除?" @confirm="handleDelete(slotProps.row)" :disabled="disable">
          <t-button theme="danger" size="small">删除</t-button>
        </t-popconfirm>
      </t-space>
    </template>
  </t-table>
</t-card>

<!-- 新增FORM -->
<t-dialog v-model:visible="photoVisible" :header="formHeader" :width="680" :footer="false" top="30px">
  <t-upload ref="uploadRef1" v-model="fileList" :data="uploadData" :max="8" multiple :headers="upheaders"
    action="upload" theme="image" accept="image/*" :auto-upload="true" @remove="removePhoto"
    @success="changePhoto"></t-upload>
</t-dialog>

<!-- 新增FORM -->
<t-dialog v-model:visible="dialogVisible" :header="formHeader" :width="680" :footer="false" top="30px">
  <t-form ref="tenantForm" :data="formData" :rules="rules" :label-width="100" @submit="handleSave">
    <t-form-item label="房间名" name="house_number_id" v-if="!formData.id">
      <t-select v-model="formData.house_number_id" class="demo-select-base" :style="{ width: '480px' }" clearable
        filterable>
        <t-option v-for="(item, index) in numberArr" :key="index" :value="item.value" :label="item.label">
          {{ item.label }}
        </t-option>
      </t-select>
    </t-form-item>
    <t-form-item label="入住日期" name="checkin_time">
      <t-date-picker v-model="formData.checkin_time" mode="date" :style="{ width: '480px' }" clearable />
    </t-form-item>
    <t-form-item label="姓名" name="name">
      <t-input v-model="formData.name" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="性别" name="sex">
      <t-radio-group v-model="formData.sex">
        <t-radio value="M">男</t-radio>
        <t-radio value="F">女</t-radio>
      </t-radio-group>
    </t-form-item>
    <t-form-item label="手机号码" name="phone">
      <t-input-number v-model="formData.phone" :style="{ width: '480px' }" theme="normal" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="身份证号码" name="id_card_number">
      <t-input v-model="formData.id_card_number" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="籍贯" name="native_place">
      <t-input v-model="formData.native_place" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="工作单位" name="work_units">
      <t-input v-model="formData.work_units" :style="{ width: '480px' }" placeholder="请输入" />
    </t-form-item>
    <t-form-item label="备注" name="note">
      <t-textarea v-model="formData.note" :style="{ width: '480px' }" placeholder="请输入" autosize />
    </t-form-item>
    <t-form-item style="float: right">
      <t-button variant="outline" @click="dialogVisible = false" style="margin-right: 5px;">取消</t-button>
      <t-button theme="primary" type="submit" :disabled="disable">确定</t-button>
    </t-form-item>
  </t-form>
</t-dialog>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    tableLoading: false,
    columns: [
      { title: '房产名', colKey: 'property_name', width: 80, fixed: 'left' },
      { title: '房间名', colKey: 'number_name', width: 75, fixed: 'left' },
      { title: '姓名', colKey: 'name', width: 70, },
      { title: '性别', colKey: 'sex_name', width: 50 },
      { title: '年龄', colKey: 'age', width: 50 },
      { title: '身份证号码', colKey: 'id_card_number', width: 120, ellipsis: true },
      { title: '户口所在地', colKey: 'native_place', width: 85 },
      { title: '现工作单位', colKey: 'work_units', width: 100, ellipsis: true },
      { title: '联系电话', colKey: 'phone', width: 105 },
      { title: '备注', colKey: 'note', width: 100, ellipsis: true },
      { title: '入住日期', colKey: 'checkin_time', width: 93, fixed: 'right' },
      { title: '离开日期', colKey: 'leave_time', width: 93, fixed: 'right' },
      { title: '操作', colKey: 'op', width: 160, fixed: 'right', },
    ],
    // 分页
    pagination: {
      defaultPageSize: 10,
      total: 10,
      defaultCurrent: 1,
    },
    dialogVisible: false,
    formData: {},
    formHeader: '',
    rules: {
      house_number_id: [{ required: true, message: '房间名不能为空', trigger: 'change' }],
      name: [{ required: true, message: '必填', trigger: 'blur' }],
      checkin_time: [{ required: true, message: '必填', trigger: 'blur' }],
      phone: [{ telnumber: true, message: '格式错误', trigger: 'blur' }],
      id_card_number: [{ idcard: true, message: '格式错误', trigger: 'blur' }],
    },
    // 证件照片
    photoVisible: false,
    upheaders: { 'X-CSRF-TOKEN': '{$layout_token}' },
    uploadData: {},
    fileList: [],
    selectId: 0,
    // 搜索框
    searchValue: '',
    // 避免重复点击
    disable: false,
    // 新增租客
    numberArr: [],
  };
  function f() {
    return {
      init: function () {
        this.queryTable();
        this.queryNumber();
      },
      queryTable: function () {
        this.tableLoading = true;
        axiosGet("{:url('queryTenant')}", { 'parameter': this.searchValue }).then(response => {
          if (response.code == 1) {
            this.tableData = response.data;
            this.pagination.total = response.count;
          } else {
            this.$message.error('系统出错了!!!');
          }
          this.tableLoading = false;
        });
      },
      queryNumber: function () {
        axiosGet("{:url('house.number/queryRentedNumber')}").then(response => {
          if (response.code == 1) {
            this.numberArr = response.data;
          } else {
            this.$message.error('系统出错了!!!');
          }
        });
      },
      handleEdit(row) {
        this.$refs.tenantForm.reset();
        this.formData = { ...row };
        this.formHeader = row.property_name + '-' + row.number_name
        this.dialogVisible = true;
      },
      handleSave() {
        this.disable = true;
        this.$refs.tenantForm.validate().then((valid) => {
          if (valid == true) {
            axiosPost("{:url('save')}", this.formData).then(response => {
              if (response.state == 'success') {
                this.$message.success(response.msg);
                this.dialogVisible = false;
                this.queryTable();
              } else if (response.state == 'warning') {
                this.$message.warning(response.msg);
              } else {
                this.$message.error(response.msg);
              }
            }).finally(() => {
              this.disable = false;
            });
          } else {
            this.disable = false;
          }
        });
      },
      // 证件照片
      handlePhoto(row) {
        this.selectId = row.id;
        this.queryPhoto();
        this.formHeader = row.property_name + '-' + row.number_name + '-' + row.name;
        this.uploadData = { way: row.id, house_property_id: row.house_property_id }
        this.photoVisible = true;
      },
      queryPhoto() {
        axiosGet("{:url('queryPhoto')}", { id: this.selectId }).then(response => {
          if (response.code == 1) {
            this.fileList = response.data;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      removePhoto(file) {
        axiosPost("{:url('deletePhoto')}", file.file).then(response => {
          if (!response.state == 'success') {
            this.$message({
              message: response.msg, type: response.state
            });
          }
        });
      },
      changePhoto(res) {
        this.queryPhoto();
        let code = res.response[0].code;
        if (code == 1) {
          this.$message.success('上传成功');
        } else {
          this.$message.error('上传失败');
        }
      },
      // 搜索
      handleSearch() {
        this.queryTable();
      },
      // 删除租客
      handleDelete(row) {
        if (this.disable) return;
        this.disable = true;
        axiosPost("{:url('delete')}", row).then(response => {
          if (response.state == 'success') {
            this.$message.success(response.msg);
            this.init();
          } else if (response.state == 'warning') {
            this.$message.warning(response.msg);
          } else {
            this.$message.error(response.msg);
          }
        }).finally(() => {
          this.disable = false;
        });
      },
      // 导出excel
      handleExport() {
        axiosDownload("{:url('export')}", { 'parameter': this.searchValue });
      },
      // 新增租客
      handleAdd() {
        this.$refs.tenantForm.reset();
        this.formData = {
          house_property_id: this.houseDef,
          checkin_time: getCurrentDateString(),
        };
        this.formHeader = this.houseName + " - 新增租客";
        this.dialogVisible = true;
      },
    };
  }
</script>
{/block}